Mermaid 記法で図を描くと便利そう(LT)
https://gyazo.com/f5df1b81dcfd59bf14d7c1d95540d6d4
Mermaid 記法とは
https://gyazo.com/50c8b5936798b16664804c368fbde1ac
めちゃくちゃいろんな図が書ける
フローチャート
code:flowchart.mmd
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
シーケンス図
code:sequence-diagram.mmd
sequenceDiagram
participant Alice
participant Bob
Alice->>John: Hello John, how are you?
loop HealthCheck
John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts <br/>prevail!
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!
code:sequence.mmd
ガントチャート
code:gantt-diagram.mmd
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram to mermaid
excludes weekdays 2014-01-10
section A section
Completed task :done, des1, 2014-01-06,2014-01-08
Active task :active, des2, 2014-01-09, 3d
Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d
クラス図
code:class-diagram.mmd
classDiagram
Class01 <|-- AveryLongClass : Cool
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 <--> C2: Cool label
Git図(?)
code:git-graph.mmd
gitGraph
commit
commit
branch develop
commit
commit
commit
checkout main
commit
commit
ER図
code:entyty-relation-diagram.mmd
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
ユーザージャーニーマップ
code:user-journey-diagram.mmd
journey
title My working day
section Go to work
Make tea: 5: Me
Go upstairs: 3: Me
Do work: 1: Me, Cat
section Go home
Go downstairs: 5: Me
Sit down: 5: Me
クアドラントチャート(マトリクス図)
code:quadrant-chart.mmd
quadrantChart
title Reach and engagement of campaigns
x-axis Low Reach --> High Reach
y-axis Low Engagement --> High Engagement
quadrant-1 We should expand
quadrant-2 Need to promote
quadrant-3 Re-evaluate
quadrant-4 May be improved
棒グラフ、折れ線グラフ(XYチャート)
code:xy-chart.mmd
xychart-beta
title "Sales Revenue"
x-axis jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec y-axis "Revenue (in $)" 4000 --> 11000
bar 5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000 line 5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000 ↑CosenseのMermaid.jsが多分まだバージョン古い。そのうち表示されるようになるはず。
https://gyazo.com/b8d3fb2efc2461c0d75af8899c0f0f5f
めちゃくちゃいろんなところに書ける(大事)
GitHub
Slack (別途Slack Appが必要)
Notion
Cosense
etc...
Cosense、ユーザースクリプトでユーザーが勝手にやっていたやつが公式に取り込まれたという、Webサービスいい話(小話)
https://gyazo.com/74e8b39cc55e25fe396723ced3c07d3c
VSCodeのプラグインでLiveプレビューしながら書ける
https://gyazo.com/86ad982e1145efa23f62eb648532febd
リガチャ対応フォントでリガチャを有効にしておくと、さらに臨場感が出て楽しい(--> のとこ)
Notion や Cosense なら共同編集で、リアルタイムで複数人で編集できる。
物理ホワイトボードの代替品として使える。
フローチャート、シーケンス図、クラス図、ER図あたりは、結構便利に使えそう
(ここで、最近書いたER図とクラス図をSecret Gistに置いてあるので、LTを聞いている人にリンクを教える)
手で書くよりきれいに書けるので便利(個人の見解です)
Syntaxは難しく見えるけど、実際は覚えることそんなにない(個人の見解です)
以上、Mermaidの紹介でした。
One more thing...
GitHubでMermaid記法が使えることをドキュメントなどを確認していて初めて知ったのですが...
おわかりいただけただろうか・・・
GitHub、STLの埋め込みに対応している!!!!!!!!
ご清聴ありがとうございました。